<template>
    <Modal v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="500">
        <el-form ref="formInfo" label-position="right" label-width="80px" :model="formInfo">
            <el-form-item label="单价/方" prop="price" :rules="[{required:true,message:'', trigger: 'blur'}]">
                <el-input @change="jisuan" v-model="formInfo.price" type="number" />
            </el-form-item>
            <el-form-item label="体积(m³)"  prop="volume" :rules="[{required:true,message:'实际体积不能为空', trigger: 'blur'}]">
                <el-input @change="jisuan" v-model="formInfo.volume" type="number" />
            </el-form-item>
            <el-form-item label="海运费合计" prop="fee" :rules="[{required:true,message:'费用不能为空', trigger: 'blur'}]">
                <el-input v-model="formInfo.fee" type="number" />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="modalLoading" @click="doSubmit">确定</el-button>
        </div>
    </Modal>
</template>
<script>
import api from "@/api/api"

export default {
    name: 'StorageProduct',
    data() {
        return {

            show: false,
            billId: null,
            formInfo: {
                fee: null,
                volume: null,
                price: null

            },
            modalLoading: false

        };
    },
    mounted: function() {



    },
    props: [
        'product'
    ],
    methods: {
        jisuan(){
            var vl=this.formInfo.volume;
            var price=this.formInfo.price;
            if(vl&&price){
                this.formInfo.fee=vl*price;
            }
            },
        hideDialog() {
            this.modalLoading = false;
            this.show = false;
        },
        showDialog(billId) {
            this.billId = billId;
            this.show = true;
        },
        showModal: function(value) {
            if (value) {

            } else {
                this.formInfo = {
                    fee: null,
                    volume: null,
                    price: null

                };
            }
        },
        ok: function() {
            this.show = false;
            this.$emit("ok");
        },
        cancel: function() {
            this.hideDialog();
            this.$emit("cancel");
        },

        doSubmit() {
            if (this.formInfo.fee <= 0) {
                this.errorMessage("请填写好费用");
                return false;
            }
            this.modalLoading = true;
            this.$http.post("/storagebill/doFee.do", { id: this.billId, fee: this.formInfo.fee, price: this.formInfo.price, realVolume: this.formInfo.volume, volume: this.formInfo.volume  }).then(res => {
                this.hideLoading();
                if (res.status == 0) {

                    this.modalLoading = false;
                    this.successMessage("成功！");
                    this.ok();
                } else {
                    this.errorMessage(res.info);
                }
            }, response => {
                this.modalLoading = false;
            });
        }
    }
}
</script>
<style scoped>
</style>